<template>
    <form @submit.prevent="addTodo">
      <input v-model="newTodoText" placeholder="输入新的待办事项">
      <button type="submit">添加</button>
    </form>
  </template>
  
  <script setup>
  import { ref, defineEmits } from 'vue';
  
  const newTodoText = ref('');
  const emits = defineEmits(['add']);
  
  const addTodo = () => {
    if (newTodoText.value.trim()) {
      emits('add', newTodoText.value);
      newTodoText.value = '';
    }
  };
  </script>
  
  <style scoped>
  form {
    display: flex;
    margin-bottom: 16px;
  }
  
  input {
    flex: 1;
    padding: 8px;
    margin-right: 8px;
  }
  
  button {
    padding: 8px 16px;
  }
  </style>    